<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示头像回显功能实现</title>
    <!--1.引入外部的vue.js文件-->
    <script src="./js/vue@3.5.12.global.js"></script>
    <style>
        img{
            width: 120px;
            height: 120px;
            border: 1px solid #ccc;
        }
        #avatar{
            display: none;
        }
    </style>
</head>
<body>
<!--2.视图-->
    <div id="app">
        <label for="avatar"><img src="./images/default.jpg" ref="image" alt=""></label>
        <input id="avatar" ref="avatar" type="file" @change="getFile">
        <p><button @click="save">上传头像</button></p>
    </div>
</body>
<script>
    //3.创建Vue实例
    const app = Vue.createApp({
        //model:放数据的地方
        data(){
            return {
                file:undefined,//头像
            }
        },
        methods:{
            getFile(){
                let file = this.$refs.avatar.files[0]
                console.log(file)
                //解决用户单击图片，但是没有选择图片。
                if(!file){
                    return;
                }
                //创建文件流
                let reader = new FileReader();
                //读取文件
                reader.readAsDataURL(file);
                //获取图像标签
                let image = this.$refs.image;
                //为文件设置加载事件
                reader.addEventListener('load',()=>{
                    //重新设置图片
                    image.src = reader.result;
                })
                this.file = file;
            },
            save(){
                //判断头像不为空，才上传
                if (!this.file){
                    alert('请单击图片区域选择头像...')
                    return;
                }
                console.log(this.file)
            }
        }
    })
    //4.挂载:将数据渲染到指定的视图位置
    app.mount('#app');
</script>
</html>